<!--
 * @Author: wjc
 * @Date: 2025-10-15 16:04:01
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-21 15:22:57
 * @Description: 
-->
<template>
  <div>
    <NiceCard>
      <NiceCardHeader>
        <div class="flex items-center gap-2">
          <span class="font-500 text-4.5">Element Plus 组件</span>
        </div>
      </NiceCardHeader>
      <NiceCardContent class="flex flex-col gap-10">
        <div class="flex flex-col gap-4">
          <div class="button-row">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
          </div>

          <div class="button-row">
            <el-button plain>Plain</el-button>
            <el-button type="primary" plain>Primary</el-button>
            <el-button type="success" plain>Success</el-button>
            <el-button type="info" plain>Info</el-button>
            <el-button type="warning" plain>Warning</el-button>
            <el-button type="danger" plain>Danger</el-button>
          </div>

          <div class="button-row">
            <el-button round>Round</el-button>
            <el-button type="primary" round>Primary</el-button>
            <el-button type="success" round>Success</el-button>
            <el-button type="info" round>Info</el-button>
            <el-button type="warning" round>Warning</el-button>
            <el-button type="danger" round>Danger</el-button>
          </div>
        </div>
        <div class="flex flex-col gap-4">
          <el-input v-model="formState.input1" style="width: 240px" placeholder="Please input" />
          <el-select v-model="formState.select1" placeholder="Select" style="width: 240px">
            <el-option
              v-for="item in [
                {
                  value: 'Option1',
                  label: 'Option1',
                },
                {
                  value: 'Option2',
                  label: 'Option2',
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-switch v-model="formState.value1" />
          <el-radio-group v-model="formState.radio1">
            <el-radio value="1">Option 1</el-radio>
            <el-radio value="2">Option 2</el-radio>
          </el-radio-group>
          <div>
            <el-checkbox v-model="formState.checked1" label="Option 1" />
            <el-checkbox v-model="formState.checked2" label="Option 2" />
          </div>
          <el-table :data="formState.table1" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="address" label="地址" />
          </el-table>
          <el-dropdown>
            <span class="el-dropdown-link">Dropdown List</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>Action 1</el-dropdown-item>
                <el-dropdown-item>Action 2</el-dropdown-item>
                <el-dropdown-item>Action 3</el-dropdown-item>
                <el-dropdown-item disabled>Action 4</el-dropdown-item>
                <el-dropdown-item divided>Action 5</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="flex gap-2">
            <el-tag type="primary">primary</el-tag>
            <el-tag type="success">success</el-tag>
            <el-tag type="info">info</el-tag>
            <el-tag>default</el-tag>
            <el-tag type="warning">warning</el-tag>
            <el-tag type="danger">danger</el-tag>
          </div>
        </div>
      </NiceCardContent>
    </NiceCard>
  </div>
</template>

<script setup lang="ts">
  import { NiceCard, NiceCardContent, NiceCardHeader } from '@nice/nice-ui'

  defineOptions({ name: 'ElementPlusGuide' })

  const formState = ref({
    input1: '',
    select1: 'Option1',
    value1: true,
    radio1: '1',
    checked1: true,
    checked2: false,
    table1: [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  })
</script>

<style lang="scss" scoped></style>
